<template>
  <view class="w-[358px] mx-auto color-[#999] mt-2">
    <!-- 患者信息卡片 -->
    <view class="bg-white rounded-lg shadow-xl p-3 pt-4 text-[9px] flex flex-col gap-1">
      <!-- 患者基本信息 -->
      <view class="flex justify-between items-center">
        <view class="flex items-center">
          <text class="name font-bold">{{nurseUser.name}}</text>
          <text class="heart-icon relative left-[4px] top-[-10px] text-[6px]">💎💎💎</text>
          <!-- <text class="medical-note ml-4 text-sm text-gray-600">(重大病史)</text> -->
        </view>

        <view class="guardian-info">
          <text class="guardian font-bold text-blue-500" @tap="onTapGuardian">{{goodsStore.family?.name || '选择家庭成员'}}</text>
          <text class="relative left-[-10rpx] top-[-14rpx]">(重大病史)</text>
          <text class="relative left-[-20rpx] top-[-30rpx]">12</text>
        </view>

        <text class="gender-age">{{other.sex=='1'?'男':'女'}} {{other.age}}{{other.ageUnit}}</text>
        <text class="relation">关系：{{other.relationName|| '-'}}</text>
      </view>

      <view class="flex gap-8 items-center">
        <text class="">{{ nurseUser.idcard || '-' }}</text>
        <text class="">7710000000001</text>
      </view>

      <!-- 两列布局 -->
      <view class="flex gap-2 relative">
        <image
          :src="obj?.goods?.imagePath"
          mode="aspectFill" class="w-[80px] h-[80px] rounded-lg bg-[#eee]" />
        <view class="flex flex-col gap-1 flex-1">
          <text class="">{{ obj?.goods?.bill_name }}</text>
          <text class="text-[12px]">{{obj?.goods?.name}}</text>
          <text class="text-[12px]">服务时长：{{goodsStore.durationText}}</text>
          <!-- <text class="">¥{{goodsStore.sku.cur?.price || 0}}</text> -->
          <!-- <text class="">¥{{obj?.goods?.price || 0}}</text> -->
          <!-- <text class="">医疗技术服务费: ¥{{ techNum }}</text> -->
        </view>
        <button class="absolute right-4 bottom-0">
          收藏
        </button>
      </view>

      <view class="flex items-center">
        <image class="w-[16px] h-[16px] mr-1" mode="aspectFit" :src="ico"></image>
        <text class="text-[14px]">一站式整合型居家医疗照护服务</text>
      </view>
      <view class="flex items-center justify-between text-[10px]">
        <view class="flex items-center">
          <image class="w-[12px] h-[12px] mr-1" mode="aspectFit" :src="ico"></image>
          <text>护士集团</text>
        </view>
        <view class="flex items-center">
          <image class="w-[12px] h-[12px] mr-1" mode="aspectFit" :src="ico"></image>
          <text>健康管家</text>
        </view>
        <view class="flex items-center">
          <image class="w-[12px] h-[12px] mr-1" mode="aspectFit" :src="ico"></image>
          <text>健康档案</text>
        </view>
        <view class="flex items-center">
          <image class="w-[12px] h-[12px] mr-1" mode="aspectFit" :src="ico"></image>
          <text>三重评估</text>
        </view>
        <view class="flex items-center">
          <image class="w-[12px] h-[12px] mr-1" mode="aspectFit" :src="ico"></image>
          <text>双人入户</text>
        </view>
      </view>
    </view>


  </view>

  <!-- 家庭成员选择器 -->
  <nut-popup v-model:visible="showFamilyPicker" position="bottom">
    <nut-picker 
      v-model="familyPickerValue" 
      :columns="familyOptions" 
      :field-names="familyFieldNames"
      title="选择家庭成员"
      @confirm="confirmFamilyMember"  
      @cancel="showFamilyPicker=false"
    />
  </nut-popup>
</template>

<script lang="ts" setup>
// import { useAuthStore } from '@/store';
import { ref, computed } from 'vue';
import { storeToRefs } from 'pinia';
import ico from '@/assets/ico/logo.png'
import { useAuthStore, useGoodsStore } from '@/store';
import { getLastTimeStr, getListTimeStr } from './tooler';

const goodsStore = useGoodsStore();

const props = defineProps({
  obj: {
    type: Object,
    required: true
  }
})

const { nurseUser } = storeToRefs(useAuthStore());
const techNum = ref(0.02)

// 家庭成员选择相关
const showFamilyPicker = ref(false);
const selectedFamilyIndex = ref(0);
const familyPickerValue = ref([0]);

// 家庭成员选择器配置
const familyFieldNames = {
  text: 'name',
  value: 'id'
};

// 家庭成员选项
const familyOptions = computed(() => {
  const familyList = nurseUser.value?.nurseUserFamilyList || [];
  return familyList.map((member: any, index: number) => ({
    id: index,
    name: member.name || '未命名',
    ...member
  }));
});

// 点击选择家庭成员
const onTapGuardian = () => {
  console.log("---- onTapGuardian", nurseUser.value?.nurseUserFamilyList);
  if (familyOptions.value.length > 0) {
    showFamilyPicker.value = true;
  } else {
    console.log('没有家庭成员数据');
  }
}

// 确认选择家庭成员
const confirmFamilyMember = ({ selectedValue, selectedOptions }: { selectedValue: any[], selectedOptions: any[] }) => {
  console.log('选中的家庭成员 selectedValue:', selectedValue);
  console.log('选中的家庭成员 selectedOptions:', selectedOptions);
  
  // 更新选中的索引
  selectedFamilyIndex.value = selectedValue[0];
  familyPickerValue.value = selectedValue;
  showFamilyPicker.value = false;
  
  console.log('selectedValue[0] 😂😂', selectedValue[0]);
  goodsStore.family  = selectedOptions[0]
  console.log('goodsStore.family 😂😂', goodsStore.family);
};

// 当前选中的家庭成员
const other = computed(() => {
  const familyList = nurseUser.value?.nurseUserFamilyList || [];
  
  console.log('other computed 执行:', {
    familyListLength: familyList.length,
    selectedFamilyIndex: selectedFamilyIndex.value,
    familyList: familyList
  });
  
  if (familyList.length > 0 && selectedFamilyIndex.value < familyList.length) {
    const selectedMember = familyList[selectedFamilyIndex.value] || {};
    console.log('选中的家庭成员对象:', selectedMember);
    return selectedMember;
  }
  
  console.log('返回空对象，条件不满足');
  return {};
})

defineExpose({
  getPrice() {
    console.log("---- getPrice", props.obj?.price, techNum.value)
    return props.obj?.price + techNum.value
  }
})
</script>

<style lang="scss">
.nut-radio__label{
  font-size: 20rpx;
}
.nut-radio {
  margin-bottom: 0px !important;
  padding-bottom: 0px!important;
}
</style>
